import Taro from "@tarojs/taro";
import {View, Text, Image} from "@tarojs/components";
import "./nav-bar.less";
import {getGlobal} from "../../api/globalData";
import {AtSearchBar} from 'taro-ui'

import backHomeImg from "../../assets/image/home_bar.png";
import backImg from "../../assets/image/back_bar.png"

export default class NavBar extends Taro.Component {

  static defaultProps = {
    title: "",
    showBox: true,
    showSearch: false
  };

  constructor() {
    super(...arguments);
    this.state = {
      showBack: true,
    }
  }

  async componentDidMount() {
    const routes = await Taro.getCurrentPages();
    const options = await Taro.getLaunchOptionsSync();
    console.log(options)
    // 当前页是首页不显示回退按钮或者是分享进入的
    if (routes
      && (routes[routes.length - 1].route === 'pages/index/index'
        || options.scene === 1036 || options.scene === 1007 || options.scene === 1008)) {
      this.setState({showBack: false})
    }


  }

  toHome() {
    Taro.switchTab({
      url: '/pages/index/index',
    })
  }

  toDiscovery() {
    Taro.navigateTo({
      url: '/pages/discovery/discovery',
    })
  }

  back() {
    Taro.navigateBack()
  }

  componentWillMount() {

  }

  render() {
    return (
      <View className="nav-bar">
        <View className="title"
              style={{
                height: `${getGlobal("navBarHeight") + 44}px`,
                paddingTop: `${getGlobal("navBarHeight")}px`
              }}>
          <View className="title_text">
            <View className="title-content" onTap={this.toDiscovery.bind(this)}>
              {this.props.showSearch ?
                <AtSearchBar
                  value={this.state.value}
                  onChange={this.onChange.bind(this)}
                  disabled
                />
                : <Text className="header-title">{this.props.title}</Text>}
            </View>
          </View>
          {
            this.props.showBox ? <View className="title_icon">
              {
                this.state.showBack ?
                  <Image onTap={this.back.bind(this)} className="floatL" src={backImg}/> : ""
              }
              {
                this.state.showBack ? <View className="floatL"/> : ""
              }
              <Image onTap={this.toHome.bind(this)} src={backHomeImg}/>
            </View> : ""
          }
        </View>
        <View style={{height: `${getGlobal("navBarHeight") + 44}px`}}/>
      </View>
    );
  }
}
